<template>
  <div class="nav-top">
    <nav-bar left-text="" left-arrow @click-left="onClickLeft">
      <template #title>
        <cell is-link @click="showPopup" v-model="myClass">
          <span>初中数学</span>
        </cell>
      </template>
      <template #right>
        <router-link :to="{ name: 'Home-MiddleMath' }">
          <tag type="primary" size="medium">
            <icon
              name="sort"
              size="18"
              class="icon-search"
              @click-right="onClickRight"
              style="
                transform: rotate(-90deg);
                color: aliceblue;
                font-size: 1rem;
                margin-right: 0.15rem;
              "
            />系统课
          </tag>
        </router-link>
      </template>
    </nav-bar>
  </div>
  <!-- 弹出层 -->
  <popup
    round
    v-model:show="show"
    style="
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 5.9375rem;
      width: 50vw;
      height: 15vh;
      box-sizing: border-box;
    "
  >
    <div class="rotate-main">
      <ul>
        <li>
          <router-link :to="{ name: 'Home-Chinese' }">语文</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'Home-MiddleMath' }">初中数学</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'Home-English' }">英语</router-link>
        </li>
      </ul>
      <ul>
        <li>
          <router-link :to="{ name: 'Home-Physics' }">初中物理</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'Home-Chemistry' }">初中化学</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'Home-HighMath' }">高中数学</router-link>
        </li>
      </ul>
      <ul>
        <li>
          <router-link :to="{ name: 'Home-Package' }">套餐</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'Home-Mathematics' }">小学数学</router-link>
        </li>
        <li><router-link :to="{ name: '' }"></router-link></li>
      </ul>
    </div>
  </popup>

  <!-- 下拉选项 -->
  <dropdown-menu class="dropdown-menu">
    <dropdown-item v-model="value1" :options="option1"> </dropdown-item>
    <dropdown-item v-model="value2" :options="option2"> </dropdown-item>
  </dropdown-menu>

  <!-- 滚动导航 -->
  <div class="Scroll-Nav">
    <tabs v-model:active="active" scrollspy sticky>
      <!-- 第一节 -->
      <tab :title="'一元一次方程'" v-for="i in 4" style="margin-bottom: 0.5rem">
        <!-- 内容标题 -->
        <div class="tab-content" style="padding: 0 0.6rem">
          <div
            class="tab-top"
            style="
              width: 35vw;
              height: 1.5rem;
              line-height: 1.5rem;
              font-size: 0.6rem;
              font-weight: bolder;
              color: #fff;
              background-color: #1989fa;
              text-align: center;
              border-radius: 0.5rem 0.5rem 0 0;
            "
          >
            第一节 一元一次方程
          </div>
          <!-- 内容部分 -->

          <div
            class="tab-main"
            style="
              width: 100%;
              height: 100%;
              background-color: aliceblue;
              border-radius: 0 0.5rem 0.5rem 0.5rem;
            "
          >
            <div>
              <div style="padding: 0.5rem" class="SystemLesson">
                <!-- 折叠面板 -->
                <collapse v-model="activeNames">
                  <collapse-item title="从算式到方程" :name="1">
                    <div
                      v-for="i in 2"
                      style="
                        padding: 0.5rem;
                        font-weight: lighter;
                        background-color: #f5f5f5;
                        display: flex;
                        line-height: 1.5rem;
                        height: 2rem;
                        justify-content: space-between;
                        margin-bottom: 0.05rem;
                      "
                    >
                      <div
                        style="
                          font-size: 0.8rem;
                          font-weight: bolder;
                          line-height: 2rem;
                          color: #333;
                        "
                      >
                        从算式到方程
                      </div>
                      <div
                        style="
                          display: flex;
                          flex-direction: column;
                          justify-content: space-around;
                        "
                      >
                        <div>
                          <router-link :to="{ name: '' }">
                            <tag type="primary" size="mini">
                              <i
                                class="fa fa-play-circle"
                                aria-hidden="true"
                              ></i
                              ><span
                                style="font-size: 0.75rem; margin-left: 0.3rem"
                                >看视频</span
                              >
                            </tag>
                          </router-link>
                          <router-link
                            :to="{ name: '' }"
                            style="margin-left: 0.7rem"
                            class="pencil"
                          >
                            <tag type="primary" size="mini">
                              <i class="fa fa-pencil" aria-hidden="true"></i
                              ><span
                                style="
                                  font-size: 0.75rem;
                                  margin-left: 0.3rem;
                                  font-weight: bolder;
                                "
                                >去做题</span
                              >
                            </tag>
                          </router-link>
                        </div>
                        <p
                          style="
                            font-size: 0.75rem;
                            text-align: right;
                            padding-right: 0.5rem;
                            color: #333;
                          "
                        >
                          暂未做题
                        </p>
                      </div>
                    </div>
                    <div
                      style="
                        padding: 0.5rem;
                        font-weight: lighter;
                        background-color: #f5f5f5;
                        display: flex;
                        line-height: 1.5rem;
                        height: 2rem;
                        justify-content: space-between;
                        margin-bottom: 0.05rem;
                      "
                    >
                      <div
                        style="
                          font-size: 0.8rem;
                          font-weight: bolder;
                          line-height: 2rem;
                          color: #333;
                        "
                      >
                        一元一次方程的定义
                      </div>
                      <i
                        class="fa fa-lock"
                        aria-hidden="true"
                        style="
                          margin-right: 1rem;
                          color: #666;
                          line-height: 2rem;
                        "
                      ></i>
                    </div>
                  </collapse-item>
                  <collapse-item title="从算式到方程" :name="2">
                    <div
                      v-for="i in 3"
                      style="
                        padding: 0.5rem;
                        font-weight: lighter;
                        background-color: #f5f5f5;
                        display: flex;
                        line-height: 1.5rem;
                        height: 2rem;
                        justify-content: space-between;
                        margin-bottom: 0.05rem;
                      "
                    >
                      <div
                        style="
                          font-size: 0.8rem;
                          font-weight: bolder;
                          line-height: 2rem;
                          color: #333;
                        "
                      >
                        一元一次方程的定义
                      </div>
                      <i
                        class="fa fa-lock"
                        aria-hidden="true"
                        style="
                          margin-right: 1rem;
                          color: #666;
                          line-height: 2rem;
                        "
                      ></i>
                    </div>
                  </collapse-item>
                  <collapse-item title="从算式到方程" :name="3">
                    <div
                      v-for="i in 2"
                      style="
                        padding: 0.5rem;
                        font-weight: lighter;
                        background-color: #f5f5f5;
                        display: flex;
                        line-height: 1.5rem;
                        height: 2rem;
                        justify-content: space-between;
                        margin-bottom: 0.05rem;
                      "
                    >
                      <div
                        style="
                          font-size: 0.8rem;
                          font-weight: bolder;
                          line-height: 2rem;
                          color: #333;
                        "
                      >
                        一元一次方程的定义
                      </div>
                      <i
                        class="fa fa-lock"
                        aria-hidden="true"
                        style="
                          margin-right: 1rem;
                          color: #666;
                          line-height: 2rem;
                        "
                      ></i>
                    </div>
                  </collapse-item>
                </collapse>
              </div>
            </div>
          </div>
        </div>
      </tab>
    </tabs>
  </div>
  <!-- 底部 -->
  <div style="line-height: 6vh; text-align: center; background-color: #1989fa">
    <span style="color: #fff; margin-right: 0.5rem">399</span
    ><i style="font-style: normal; font-size: 0.8rem; color: #fff"
      >解锁同步课</i
    >
  </div>
</template>

<script setup>
import {
  NavBar,
  Icon,
  Popup,
  Tag,
  Tab,
  Tabs,
  DropdownMenu,
  DropdownItem,
  Collapse,
  CollapseItem,
} from "vant";
import { ref } from "vue";
import "font-awesome/css/font-awesome.min.css";
import { useRouter } from "vue-router";

/* 返回首页 */
const useapp = useRouter();
const onClickLeft = () => {
  useapp.push({
    name: "Home",
  });
};

/* 折叠面板 */
const activeNames = ref(["1"]);

const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const value1 = ref(0);
const value2 = ref("a");
const option1 = [
  { text: "全部", value: 0 },
  { text: "人教新课程", value: 1 },
  { text: "北师大版", value: 2 },
  { text: "华师大版", value: 3 },
  { text: "浙教新版", value: 4 },
  { text: "湘教版", value: 5 },
  { text: "北京课改版", value: 6 },
  { text: "冀教版", value: 7 },
  { text: "沪科版", value: 8 },
  { text: "沪教版", value: 9 },
  { text: "人教版", value: 10 },
  { text: "苏教版", value: 11 },
  { text: "人教版", value: 12 },
  { text: "青岛版", value: 13 },
  { text: "鲁教版", value: 14 },
];
const option2 = [
  { text: "七年级上册", value: "a" },
  { text: "七年级下册", value: "b" },
  { text: "八年级上册", value: "c" },
  { text: "八年级下册", value: "d" },
  { text: "九年级上册", value: "e" },
  { text: "九年级下册", value: "f" },
];
</script>
<style>
/* 设置容器大小 */
#app {
  padding-bottom: 0;
}
/* 下拉选项 */
.van-dropdown-menu__bar {
  height: 2rem;
  font-size: 0.75rem;
  background-color: #f5f5f5;
}
.van-dropdown-menu__title--active {
  color: #1989fa;
}
.van-dropdown-item__option--active,
.van-dropdown-item__option--active .van-dropdown-item__icon {
  color: #1989fa;
}
/* 滚动导航 */
.Scroll-Nav {
  height: 82vh;
  overflow: auto;
}
.Scroll-Nav .van-tabs__nav--line {
  height: 75%;
  padding-bottom: 0;
}
.Scroll-Nav .van-tabs__line {
  bottom: 0;
}
.Scroll-Nav .van-sticky--fixed {
  top: 78px !important;
}
/* 按钮 */
.pencil .van-tag--primary {
  background-color: #f5f5f5;
  border: #1989fa 0.0625rem solid;
  color: #1989fa;
}
/* 底部 */
.SystemLesson .van-collapse-item__content {
  padding: 0;
}
</style>
